<template>
	<view class="container" :class="skinStyle">
		<view class="home-headers" @tap="navTo('/packageC/pages/storeCategory/sonCategory?selectedIndex=1')">
			<view class="home-search">
				<view class="iconfont iconsousuohome"></view>
				<view class="home-search-text">搜索商品名称</view>
			</view>
		</view>
		<view class="category">
			<scroll-view scroll-y scroll-with-animation class="tab-view" :scroll-top="scrollTop">
				<view class="tab-view-inner">
					<view v-for="(item,index) in tabbar" :key="index" class="tab-bar-item" :data-current="index" @tap.stop="swichNav(item,index)">
						<view class="item-inner" :class="[currentTabId===item.id ? 'active' : '']">
							{{item.categoryName}}
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="right-box">
				<mescroll-uni ref="mescrollRef" @down="downCallback" :up="upOption" @up="getProductsList" @init="mescrollInit"
				 :fixed="false">
					<view class="category-banner">
						<image :src="imgSrc+categoryBannerUrl" mode="aspectFill"></image>
					</view>
					<!-- 商品分类 左右滚动-->
					<view class="sticky-box">
						<scroll-view class="cate-bar b-b" scroll-x :scroll-left="curCateItem.left ? curCateItem.left: 0"
						 scroll-with-animation v-if="threeCategoryList.length>0">
							<view class="cate-wrap row">
								<view class="fill-view"></view>
								<text v-for="item in threeCategoryList" class="item" :class="{cateactive: item.id === threeCategoryId}"
								 :key="item.id" @click="changeCategory(item)">{{ item.categoryName }}</text>
								<view class="fill-view"></view>
							</view>
						</scroll-view>
					</view>

					<view class="category-wrap">
						<view class="category-goods" v-for="(item,index) in goodsList" :key="index" @tap="goGoodsDetail(item)">
							<view class="image-box">
								<block v-for="(child,key) in item.esGoodsImgsData" :key="key" v-if="child.imgIndex == -1">
									<image mode="aspectFill" :src="imgSrc+child.imgReuri"></image>
								</block>
							</view>
							<view class="image-text">
								<view class="goods-title">{{item.goodsName}}</view>
								<view class="goods-price">￥{{item.goodsPrice?item.goodsPrice:0}}</view>
							</view>
						</view>
					</view>
				</mescroll-uni>
			</view>
		</view>
		<tui-modal></tui-modal>
	</view>
</template>

<script>
	import mixin from "@/utils/mixin.js"
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [mixin, MescrollMixin],
		data() {
			return {
				level:2,
				imgSrc: this.$store.state.imgUrl,
				selectedIndex: 1,
				category: {
					type: 'search'
				}, //共用搜索传参
				height: 0, //scroll-view高度
				heightScroll: 0,
				top: 0,
				tabbar: [], //左侧栏二级分类
				subCategoryId: '', //通过id获取相应产品
				curSubCategoryId: '', //记录当前二级分类
				threeCategoryList: [], //三级分类
				currentTabId: 0, //默认选择第一个分类
				goodsList: [], //商品列表
				categoryBannerUrl: '', //当前显示的banner
				curCateItem: {}, //当前选中三级分类
				threeCategoryId: '', //当前选中三级分类Id
				scrollTop: 200, //tab标题的滚动条位置
				mescroll: [],
				upOption: {
					auto: false, // 不自动加载
					page: {
						size: 6 // 每页数据的数量
					},
					noMoreSize: 6,
					isBounce: false,
				},
				type: 0,
				searchKey: '',
				searchLabel:'商品名称',
				searchIndex:0,
				stockGoodsOutTypeList:['商品名称','物料码']
			}
		},
		onLoad(options) {
			// #ifdef H5
			   this.$wechat.noShare();
			// #endif
			uni.getSystemInfo({
				success: (res) => {
					let top = 0;
					//#ifdef H5
					top = 0;
					//#endif
					this.height = res.windowHeight - uni.upx2px(98)
					this.top = uni.upx2px(100)
					this.heightScroll = 750 / uni.upx2px(750) * (res.windowHeight - uni.upx2px(446)) + 'px'
				}
			});

		},
		methods: {
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
				this.getCategoryList(); //分类列表(二级)
			},
			goGoodsDetail(item) {
				console.log(item)
				uni.navigateTo({
					url: `/packageC/pages/shopProductDetail/shopProductDetail?productId=${item.id}`
				})
			},
			switchChange() {
				this.goodsList = [];
				this.mescroll.resetUpScroll()
			},
			//分类列表
			getCategoryList() {
				this.$http.getEsGoodsCategory({level:2,current:1,pageSize:10000,}).then((res) => {
					if (res.status === 0) {
						if (res.data.records.length > 0) {
							this.tabbar = res.data.records.filter(i => i.isRelease == 0);
							this.categoryBannerUrl = this.tabbar.filter(i => i.id == this.tabbar[0].id)[0].imgReuri;
							this.subCategoryId = this.tabbar[0].id;
							this.level = 3;
							this.getCurProducts(0);
						} 
					}
				})
			},
			getBannber(level) {
				let params = {
					level,
					// id:this.subCategoryId,
					current:1,
					pageSize:10000,
				};
				this.$http.getEsGoodsCategory(params).then((res) => {
					if (res.status === 0) {
						if (res.data.records.length > 0) {
							const data = res.data.records.filter(i => i.isRelease == 0);
							this.categoryBannerUrl = data.filter(i => i.id == this.subCategoryId)[0].imgReuri;
						}
					}
				})
			},
			getCurProducts(index, tag) { 
				//获取当前二级分类下的信息
				this.curSubCategoryId = this.tabbar[index].id;
				const params = {
					// level:3,
					// pid:this.curSubCategoryId
					level:this.level,
					id:this.curSubCategoryId,
					current:1,
					pageSize:10000,
				}
				this.$http.getEsGoodsCategory(params).then((res) => {
					if (res.status === 0) {
						if (res.data.records.length > 0) {
							this.level = 3;
							//三级分类
							const data = res.data.records.filter(i => i.isRelease == 0);
							this.threeCategoryList = [{
								categoryName: '全部',
								id: 'all',
							}, ...data]; 
							//高亮
							this.threeCategoryId = 'all'; 
							this.currentTabId = this.currentTabId?this.currentTabId:this.curSubCategoryId;
							//三级分类选择全部时传当前二级id
							this.subCategoryId = this.subCategoryId?this.subCategoryId:this.curSubCategoryId;
						} else {
							this.level = 2;
							this.threeCategoryList = [{
								categoryName: '全部',
								id: 'all',
							}];
							this.subCategoryId = this.curSubCategoryId;
							this.currentTabId = this.curSubCategoryId;
							this.threeCategoryId = 'all';
						}
					}
				})
				if (tag === 'secord') {
					this.switchChange()
				} else {
					this.getProductsList({
						size: 6,
						num: 1
					});
				}
			},
			swichNav(item, index) { //二级分类切换
				let cur = item.id;
				if (this.currentTabId == cur) {
					return false;
				} else {
					this.currentTabId = cur;
					this.subCategoryId = cur;
				}
				this.level = 3;
				this.getBannber(2);
				this.getCurProducts(index, 'secord');

			},
			getProductsList(page) { //产品一览详情取得
				if (this.subCategoryId) {
					let params = {
						current: page.num,
						pageSize: page.size,
						categroyId: this.subCategoryId,
						isShelf: 1,//0:下架,1:上架
						type: 0 ,//0:初期 1:查询
						enableStatus: 0, //"0":"启用","1": "禁用"
						goodsName: this.searchKey
					};
					console.log(params)
					this.$http.getEsGoodsAll(params).then((res) => {
						if (res.status === 0) {
							let curPageData = res.data.records;
							this.mescroll.endSuccess(curPageData.length);
							if (page.num == 1) {
								this.goodsList = [];
							};
							this.goodsList = this.goodsList.concat(curPageData);
						} else {
							this.mescroll.endErr()
						}
					}).catch(() => {
						this.mescroll.endErr()
					});
				} else {
					this.mescroll.endSuccess(0);
					this.mescroll.endErr();
				}
			},
			//三级分类切换
			changeCategory(item) {
				if (this.threeCategoryId === item.id) {
					return;
				}
				this.threeCategoryId = item.id;
				if (item.id === 'all') {
					this.subCategoryId = this.curSubCategoryId;
				} else {
					this.subCategoryId = item.id;
				}
				this.level = 3;
				if(item.id === 'all') {
					this.getBannber(2);
				} else {
					this.getBannber(3);
				}
				this.switchChange();
			},
			clearSearchKey() {
				this.searchKey = '';
				this.type = '0';
				this.getProductsList({size:6,num:1});
			},
			comfirmSearch() {
				this.type = '1';
				this.getProductsList({size:6,num:1});
			}
		}
	}
</script>

<style lang="scss">
	.container{
		height: 100vh;
		display: flex;
		flex-direction: column;
		.safe-area{
			width: 100%;
			height: calc(constant(safe-area-inset-bottom) + 98rpx);
			height: calc(env(safe-area-inset-bottom) + 98rpx);
			height: 100rpx;
		}
		
		.category{
			
			flex: 1;
			min-width: 0;
			min-height: 0;/* 需给flex:1的元素加上最小高,否则内容超过会溢出容器 (如:小程序Android真机) */
			display: flex;
			padding-top:16rpx;
			.tab-view {
				width: 196rpx;
				// position: fixed;
				// left: 0;
				// z-index: 10;
				// box-sizing: border-box;
				background:transparent;
				height: 100%;
				position: relative;
				
				.tab-view-inner{
					width: 180rpx;
					min-height: 100%;
					background: #fff;
					box-sizing: border-box;
					padding:2rpx 0rpx;
				}
				.tab-bar-item {
					width: 180rpx;
					height:100rpx;
					box-sizing: border-box;
					
					font-size: 28rpx;
					color: #666666;
					position: relative;
					.item-inner{
						width: 100%;
						height: 100%;
						line-height:100rpx;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
						padding:0 20rpx;
						&.active {
							font-weight: 600;
							background-color: #fff;
							color:#000!important;
							font-size: 30rpx;
							position: absolute;
							left:0;
							top:2rpx;
							width: 188rpx;
							height: 100rpx;
							border-radius: 0rpx 16rpx 16rpx 0;
							box-shadow: 0px 4rpx 24rpx 0px rgba(0, 0, 0, 0.1);
							&::before {
								content: "";
								position: absolute;
								height: 96rpx;
								left: 0;
								border-left: 8rpx solid #EA655E;
							}
						}
					}
				}
				
				
				
			}
			
	
		}
		
	}
	
	
	/* 隐藏scroll-view滚动条*/
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
		display: none;
	}
	
	
	
	/* 左侧导航布局 end*/
	.right-box {
		padding-right:20rpx;
		flex: 1;
		min-width: 0;
		.mescroll-empty{
			padding-bottom: 50%;
		}
		// .right-box-wrap{
		// 	// position: relative;
		// 	width:100%;
		// 	height: 100%;
		// 	box-sizing: border-box;
		// 	// overflow: hidden;
		// }
		// .right-box-inner{
		// 	width:100%;
		// 	height: calc(100vh - 200rpx);
		// 	box-sizing: border-box;
		// 	position: absolute;
		// 	// overflow-y: auto;
		// 	top: constant(safe-area-inset-bottom);
		// 	top: env(safe-area-inset-bottom);
		// }
		
	}
	.category-banner{
		width:100%;
		height:164rpx;
		background: #f5f5f5;
		overflow: hidden;
		padding:0 10rpx;
		image{
			width:100%;
			height:160rpx;
		}
	}
	.sticky-box {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		position: -webkit-sticky;
		/* #endif */
		// position: sticky;
		// top: var(--window-top);
		// top:0rpx;
		z-index: 990;
		position: sticky;
		top: 0;
		flex-direction: row;
		margin: 0px;
		border-bottom: 1px solid $borderColor;
		height: 84rpx;
		padding:0 10rpx;
		background-color: #f7f7f7;
		 // box-shadow: -20px -2px 45px -13px #fff inset;
		.cate-bar:after{
			border-color: #f5f5f5;
		}
		.cate-wrap{
			flex-wrap: nowrap;
			height: 80rpx;
			padding-top: 6rpx;
			.fill-view{
				flex-shrink: 0;
				width: 20rpx;
				height: 20rpx;
				
				&:last-child{
					width: 10rpx;
				}
			}
			.item{
				flex-shrink: 0;
				height:44rpx;
				padding: 0 24rpx;
				margin-right: 20rpx;
				font-size: 22rpx;
				color:#111111;
				text-align: center;
				line-height: 44rpx;
				background-color: #f5f5f5;
				border-radius: 100px;
				font-weight: 400;
			}
			.cateactive{
				color: #fff;
				background: linear-gradient(151deg, #F69E97 0%, #EA655E 100%);
				opacity: 0.8;
			}
		}
	}
	
		.mescroll-uni-warp{
			min-height: 100%;
		}
		.mescroll-uni-content{
			height: 100%;
		}
		.mescroll-uni{
			min-height: calc(100vh - 440rpx);
			padding-bottom:constant(safe-area-inset-bottom)!important;
			padding-bottom:env(safe-area-inset-bottom)!important;
		}
		.category-wrap{
			padding:0 5rpx;
			width:100%;
			.category-goods{
				width:calc(50% - 20rpx);
				height: 312rpx;
				float:left;
				background-color: #fff;
				box-shadow: 0rpx 4rpx 24rpx 0rpx rgba(143, 97, 95, 0.1);
				box-sizing: border-box;
				padding:12rpx 12rpx 20rpx 12rpx;
				border-radius: 18rpx;
				margin:0rpx 10rpx 20rpx;
				// &:nth-child(2n+1){
				// 	margin:0rpx 20rpx 20rpx 0;
				// }
				// &:nth-child(2n){
				// 	margin:0rpx 10rpx 20rpx 20rpx;
				// }
				&:nth-child(1),&:nth-child(2){
					margin-top:20rpx;
				}
			
				.image-box{
					width: 100%;
					height: 164rpx;
					margin-bottom: 8rpx;
					overflow: hidden;
					border-radius:8rpx;
					image{
						width: 100%;
						height: 100%;
						// object-fit:cover;
					}
				}
				.image-text{
					padding:0 4rpx;
					.goods-title{
						color:#121212;
						font-size: 26rpx;
						// overflow: hidden;
						// text-overflow:ellipsis;
						// white-space: nowrap;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						height: 68rpx;
						line-height: 36rpx;
						margin-bottom: 8rpx;
					}
					.goods-subtitle{
						font-size: 22rpx;
						color:#121212;
						height: 44rpx;
					}
					.goods-price{
						color: #EA655E;
						font-size: 28rpx;
						font-weight: bold;
					}
				}
				
			}
		}
</style>
